<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-09-01
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2024-03-05
 * @FilePath: /element-admin/src/views/FoodCalDinnerTab.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="Food-Cal-DinnerTab-page">
    <!--顶部搜索栏-->
<!--    <div class="col-md-12">-->
<!--      <el-row :gutter="20">-->
<!--        <el-col :span="22" :offset="1" class="clearfix">-->
<!--          <el-form :inline="true" :model="query" class="demo-form-inline">-->
<!--            <el-form-item>-->
<!--              <el-button type="primary" @click="handleTotExut" :disabled="exDis" size="small">3.食料总重量计算-->
<!--              </el-button>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </div>-->
    <!--中部数据表格栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <div class="mainTabTable">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="">计算日: {{ calDay }}</span>
                <span class="" style="margin-left: 20px;">食材核算汇总</span>
              </div>
              <div style="height:300px;overflow-y: auto">
                <span v-if="false">{{foodTotList}}</span>
                <el-descriptions class="margin-top" title="食材汇总(克)" :column="6" size="mini" border>
                  <template slot="extra">
                    <el-button type="primary" size="small">操作</el-button>
                  </template>
                  <el-descriptions-item v-for="item in foodTotList" v-bind:key="item.name">
                    <template slot="label">
                      {{ item.name }}
                    </template>
                    {{ item.intake }}
                  </el-descriptions-item>
                </el-descriptions>
                <el-table :data="foodTotList"
                          :cell-style="{padding:'5px'}"
                          :key="isIndex" v-loading="isLoading" border
                          stripe row-key="id" v-if="false">
                  <el-table-column v-if="isIndex == 1" type="index" label="Index" width="75" fixed></el-table-column>
                  <el-table-column prop="name" label="选用食材"></el-table-column>
                  <el-table-column prop="intake" label="生产用量"></el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="22" :offset="1" class="clearfix">
          <div class="mainTabTable">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="">计算日: {{ calDay }}</span>
              <span class="" style="margin-left: 20px">单日食材核算汇总</span>
            </div>
            <div v-for="(day_val, index) in foodCalDaysList" :key="index" class="text item mainTabTable">
              <el-col :span="14">
              <el-table :data="day_val.foods"
                        :cell-style="{padding:'5px'}"
                        :key="isIndex" v-loading="isLoading" border
                        stripe row-key="id">
<!--                <el-table-column v-if="isIndex == 1" type="index" label="Index" width="75" fixed></el-table-column>-->
                <el-table-column label="天数" prop="day" width="75">
                  <template>
                    {{day_val.day}}
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="选用食材"></el-table-column>
                <el-table-column prop="intake" label="生产用量(克)"></el-table-column>
              </el-table>
              </el-col>
            </div>
          </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {mapMutations} from "vuex";
import {exutTotDinner,} from "@/api/MemberWeight";

export default {
  name: "FoodCalDinnerTotTabView",
  components: {},
  data() {
    return {
      isIndex: 1,
      isLoading: false,
      exDis: false,
      tabId: "",
      query: {
        key: '',
        pageSize: 20,
        pageNum: 1,
      },
      tableHeight: 260,
      calDay: "",
      foodCalDaysList: [],
      foodTotList:[],
    }
  },
  props: {
    drawId: {type: [Object, String], default: ""}
  },
  computed: {},
  methods: {
    ...mapMutations(['add_tab']),
    init_obj() {
      return {
        foodCalDaysList: [],
      }
    },
    handle_init(tabId) {
      this.tabId = tabId;
      this.init_obj();
    },
    // 计算会员热量缺口
    handleTotExut() {
      this.init_obj();
      this.isLoading = true;
      // this.exDis = true;
      exutTotDinner().then(res => {
        if (res.code == 200) {
          this.isLoading = false;
          this.exDis = false;
          this.calDay = res.data.cal_day;
          this.foodTotList = res.data.tot;
          this.foodCalDaysList = res.data.list;
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    async TotExut() {
      this.init_obj();
      this.isLoading = true;
      // this.exDis = true;
      await exutTotDinner().then(res => {
        if (res.code == 200) {
          this.isLoading = false;
          this.exDis = false;
          this.calDay = res.data.cal_day;
          this.foodTotList = res.data.tot;
          this.foodCalDaysList = res.data.list;
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: 'STEP C 数据操作异常' + err, type: 'error', offset: 100});
      });
    },
  },
  created() {

  },
  mounted() {
  },
  watch: {
    drawId: {
      immediate: true,
      handler(drawId) {
        this.handle_init(drawId);
      }
    }
  }
}
</script>
<style scoped>
.mainTabTable {
  margin-top:15px;
  /*height: 650px;*/
  overflow-y: auto;
  overflow-x: hidden;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>